import { Carousel } from 'antd';
import { useState } from 'react';

import type { FC } from 'react';

import BaseDiv from '@/components/baseDiv';

import styles from './index.less';

const Info: FC = () => {
  const [selected, setSelected] = useState(0);
  const [selected2, setSelected2] = useState(0);
  const [selected3, setSelected3] = useState(0);
  const [selected4, setSelected4] = useState(0);
  const [selected5, setSelected5] = useState(0);
  const baseStyles: React.CSSProperties = {
    height: 1448,
    backgroundColor: '#FFFFFF',
    marginBottom: 1880,
  };
  const dataArr1: any[] = [{
    name: '物料缺料',
    selected: 0,
  }, {
    name: '设备维修',
    selected: 1,
  }, {
    name: '工装更换',
    selected: 2,
  }, {
    name: '质量问题',
    selected: 3,
  }, {
    name: '安全事故',
    selected: 4,
  }, {
    name: '其他支持',
    selected: 5,
  }];
  const dataArr2: any[] = [{
    name: '安灯车间监控看板',
    selected: 0,
  }, {
    name: '物料配送看板',
    selected: 1,
  }, {
    name: '设备维修看板',
    selected: 2,
  }, {
    name: '工装更换看板',
    selected: 3,
  }, {
    name: '产线支持看板',
    selected: 4,
  }, {
    name: '安全问题看板',
    selected: 5,
  }];
  const dataArr3: any[] = [{
    name: '安灯人员绩效报表-响应时间',
    selected: 0,
  }, {
    name: '安灯人员绩效报表-响应次数',
    selected: 1,
  }, {
    name: '安灯人员绩效报表-故障解决时间',
    selected: 2,
  }, {
    name: '安灯人员绩效报表-满意度评价',
    selected: 3,
  }, {
    name: '设备故障报表',
    selected: 4,
  }];
  const dataArr4: any[] = [{
    name: '消息通知方式设置',
    selected: 0,
  }, {
    name: '微信、短信、邮件',
    selected: 1,
  }, {
    name: '相关人员可远程响应',
    selected: 2,
  }, {
    name: '事件响应方式-生物识别、工号扫码',
    selected: 3,
  }];
  const dataArr5: any[] = [{
    name: '告警升级策略',
    selected: 0,
  }];
  const handleCarousel1 = (currentSlide: number) => {
    setSelected(currentSlide);
  };
  const handleCarousel2 = (currentSlide: number) => {
    setSelected2(currentSlide);
  };
  const handleCarousel3 = (currentSlide: number) => {
    setSelected3(currentSlide);
  };
  const handleCarousel4 = (currentSlide: number) => {
    setSelected4(currentSlide);
  };
  const handleCarousel5 = (currentSlide: number) => {
    setSelected5(currentSlide);
  };
  return (
    <BaseDiv baseStyles={baseStyles}>
      <div className={styles.titleContent}>云安灯系统帮助企业建立异常事件的快速响应机制</div>
      <div className={styles.infoContent}>
        <div className={styles.text}>
          <div className={styles.des}>
            多类型异常事件的呼叫、响应、执行、关闭
            现场人员与相关负责人无缝对接
          </div>
          <div className={styles.tabs}>
            {
              dataArr1.map((i: any) => {
                return <div style={i.selected === selected ? { background: 'rgba(243, 249, 255, 0.39)' } : {}} className={styles.selected}>
                  {i.name} {i.selected === selected ? <div className={styles.block} /> : null}
                </div>;
              })
            }
          </div>
        </div>
        <div className={styles.imgContentBlock}>
          <Carousel afterChange={handleCarousel1} autoplay>
            <div className={styles.appSwipe1} />
            <div className={styles.appSwipe2} />
            <div className={styles.appSwipe3} />
            <div className={styles.appSwipe4} />
            <div className={styles.appSwipe5} />
            <div className={styles.appSwipe6} />
          </Carousel>
        </div>

      </div>
      <div className={styles.infoContent}>
        <div className={styles.imgContentBlock}>
          <Carousel afterChange={handleCarousel2} autoplay>
            <div className={[styles.webBored1, styles.imgCommonCss].join(' ')} />
            <div className={[styles.webBored2, styles.imgCommonCss].join(' ')} />
            <div className={[styles.webBored3, styles.imgCommonCss].join(' ')} />
            <div className={[styles.webBored4, styles.imgCommonCss].join(' ')} />
            <div className={[styles.webBored5, styles.imgCommonCss].join(' ')} />
            <div className={[styles.webBored6, styles.imgCommonCss].join(' ')} />
          </Carousel>
        </div>
        <div className={styles.text} style={{ marginLeft: 32 }}>
          <div className={styles.des}>
            现场异常信息全流程实时监控及时暴露异常事件
          </div>
          <div className={styles.tabs}>
            {
              dataArr2.map((i: any) => {
                return <div style={i.selected === selected2 ? { background: 'rgba(243, 249, 255, 0.39)' } : {}} className={styles.selected}>
                  {i.name} {i.selected === selected2 ? <div className={styles.block} /> : null}
                </div>;
              })
            }
          </div>
        </div>
      </div>

      <div className={styles.infoContent}>
        <div className={styles.imgContentBlock}>
          <Carousel afterChange={handleCarousel5} autoplay>
            <div className={[styles.alarmEscalation].join(' ')} />
          </Carousel>
        </div>
        <div className={styles.text} style={{ marginLeft: 32 }}>
          <div className={styles.des}>
            通过后端告警升级服务
            将产线未解决的异常事件逐级上报
          </div>
          <div className={styles.tabs}>
            {
              dataArr5.map((i: any) => {
                return <div style={i.selected === selected5 ? { background: 'rgba(243, 249, 255, 0.39)' } : {}} className={styles.selected}>
                  {i.name} {i.selected === selected5 ? <div className={styles.block} /> : null}
                </div>;
              })
            }
          </div>
        </div>
      </div>

      <div className={styles.infoContent}>
        <div className={styles.text}>
          <div className={styles.des}>
            有效监督支持人员响应处理的情况考核支援部门人员的能力及工作态度
          </div>
          <div className={styles.tabs}>
            {
              dataArr3.map((i: any) => {
                return <div style={i.selected === selected3 ? { background: 'rgba(243, 249, 255, 0.39)' } : {}} className={styles.selected}>
                  {i.name} {i.selected === selected3 ? <div className={styles.block} /> : null}
                </div>;
              })
            }
          </div>
        </div>
        <div className={styles.imgContentBlock}>
          <Carousel afterChange={handleCarousel3} autoplay>
            <div className={styles.reportForm1} />
            <div className={styles.reportForm2} />
            <div className={styles.reportForm3} />
            <div className={styles.reportForm4} />
            <div className={styles.reportForm5} />
          </Carousel>
        </div>
      </div>

      <div className={styles.infoContent}>
        <div className={styles.imgContentBlock}>
          <Carousel afterChange={handleCarousel4} autoplay>
            <div className={[styles.webBored1, styles.responceMethod1].join(' ')} />
            <div className={[styles.webBored2, styles.responceMethod2].join(' ')} />
            <div className={[styles.webBored3, styles.responceMethod4].join(' ')} />
            <div className={[styles.webBored4, styles.responceMethod4].join(' ')} />
          </Carousel>
        </div>
        <div className={styles.text} style={{ marginLeft: 32 }}>
          <div className={styles.des}>
            支持多终端事件触发、消息通知及事件响应方式
          </div>
          <div className={styles.tabs}>
            {
              dataArr4.map((i: any) => {
                return <div style={i.selected === selected4 ? { background: 'rgba(243, 249, 255, 0.39)' } : {}} className={styles.selected}>
                  {i.name} {i.selected === selected4 ? <div className={styles.block} /> : null}
                </div>;
              })
            }
          </div>
        </div>
      </div>
    </BaseDiv>
  );
};

export default Info;
